<template>


    <el-card shadow="never" style="width: 450px; min-height: 700px;">
        <Header :data="data" :title="data.series" />


        <div class="main">
            <p class="title">详细参数</p>

            <el-descriptions class="margin-top" :column="1" size="default" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            主板厂商
                        </div>
                    </template>
                    {{ data.manufacturers }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            CPU插槽
                        </div>
                    </template>
                    {{ data.cpu_slot }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            内存类型
                        </div>
                    </template>
                    {{ data.memory_sum }} × {{ data.memory_type }} DIMM
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            最大内存容量
                        </div>
                    </template>
                    {{ data.capacity }} GB
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            PCI-E标准
                        </div>
                    </template>
                    {{ data.pci_e }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            PCI-E插槽
                        </div>
                    </template>
                    {{ data.pci_e_slot }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            内存接口
                        </div>
                    </template>
                    {{ data.memory_interface }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            视频接口
                        </div>
                    </template>
                    {{ data.video_interface }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            电源接口
                        </div>
                    </template>
                    {{ data.power_interface }}
                </el-descriptions-item>

            </el-descriptions>
        </div>
    </el-card>





</template>

<script setup lang="ts">
import Header from './Header.vue';

const { data } = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
</script>

<style scoped lang="scss">
.main {

    .cell-item {
        font-weight: bold;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
    }
}
</style>
